<style lang="scss">
    @import "../../../utils/base.scss";
    .wait{
        display: block;
        width: 26px;
        height: 26px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 50%;
        font-size: 14px;
        transition: background-color 0.2s ease-in-out;
        border-color: #2d8cf0;
        background-color: #2d8cf0;
    }

    .wait1{
        display: block;
        width: 26px;
        height: 26px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 50%;
        font-size: 14px;
        transition: background-color 0.2s ease-in-out;
        border-color: #2d8cf0;
        background-color: white;
    }
    .ivu-steps-item.ivu-steps-custom .ivu-steps-head-inner > .ivu-steps-icon{
        top: 0px;
    }
</style>

<template>
    <div>
        <template id="accountInfo">
            <div class="qheader" :style="{borderBottom:  '1px solid rgb(210,210,210)',}">
                <p>账号信息</p>
            </div>
            <div class="gcontent">
                <Form ref="accountInfo" :model="applyinfo" :rules="projectInfoValidate" :label-width="labelWidth" label-position="left" class="form form_left" >
                    <Row>
                        <Col span="8" >
                            <FormItem label="借用时间：" prop="startTime">
                                <DatePicker :options="disabledDate" v-model="applyinfo.startTime"  style="width: 100%;" type="date" :disabled="ifedit" placeholder="请选择日期" ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="归还时间：" prop="deadline">
                                <DatePicker :options="disabledDate" v-model="applyinfo.people[0].deadline"  style="width: 100%;" type="date" :disabled="ifedit" placeholder="请选择日期" ></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>   

                    <Row>
                        <Col span="8" >
                            <FormItem label="账号类型：" prop="accountAttr" >
                            <Input v-if="ifedit" v-model="applyinfo.people[0].severs[0].accountAttr" :readonly="readonly" />
                            <Select v-else v-model="applyinfo.people[0].severs[0].accountAttr" :transfer='true' style="z-index:999" :disabled="ifedit">
                                <Option value="主机账号">主机账号</Option>
                                <Option value="数据库账号">数据库账号</Option>
                            </Select>
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="主机账号名：" prop="sname">
                                <Input v-model="applyinfo.people[0].severs[0].sname" :readonly="ifedit" />
                            </FormItem>
                        </Col>
                    </Row>    
                    <Row>
                        <Col span="8">
                            <FormItem label="所属系统：" prop="sysId">
                                <Input v-if="ifedit" v-model="applyinfo.people[0].severs[0].rxPath" :readonly="readonly" />
                                <Select v-else :label-in-value="true" v-model="applyinfo.sysId" filterable @on-change="checksys" :disabled="ifedit">
                                    <Option v-for="item in sysList" :value="item.id" :key="item.id">{{item.sysName}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="地址(段)：" prop="wpath">
                                <Input v-model="applyinfo.people[0].severs[0].wpath" :readonly="ifedit" />
                            </FormItem>
                        </Col>
                    </Row>
                <Row>
                    <Col>
                        <FormItem label="操作指令：">
                            <Input v-model="applyinfo.reqDes" type="textarea" :rows="1" style="width:91.5%" :readonly="ifedit"/>
                        </FormItem>
                    </Col>
                </Row>        
                <Row>
                    <Col>
                        <FormItem label="申请原因：">
                            <Input v-model="applyinfo.purpose" type="textarea" :rows="3" style="width:91.5%" :readonly="ifedit"/>
                        </FormItem>
                    </Col>
                </Row>           
                </Form>
            </div>
        </template>
        
    </div>
</template>

<script>
    import ajax from "../../../ajax_util"
    import Axios from 'axios'
    //import file from './settledin/file'

    export default {
        name: "apply",
        components:{
            //file
        },

        data(){
            const validateEntryEndTime = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择期望完成时间'));
                }else{
                    if(this.applyinfo.startTime === ''){
                        callback(new Error('请选择工单发起时间'));
                    }else if(this.applyinfo.startTime.getTime() > value.getTime()){
                        callback(new Error('期望完成时间不能小于工单发起时间'));
                    }else{
                        callback()
                    }
                }
            };

            return{
                labelWidth: 140,
                readonly: true, //是否只读
                disabledDate: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now()-24*60*60*1000;
                    }
                },
                //ifedit: this.isedit,
                applyinfo:this.Papply,
                roleList:[],
                userList:[],
                projectList:[],
                sysList:[],
                projectInfoValidate:{

                },
            }
        },

        created:function(){

        },

        mounted:function(){
            this.get_all_sys()
            this.$nextTick(()=>{
                console.log('this.Papply',this.Papply)
                this.applyinfo = this.Papply
                this.applyinfo.startTime = new Date()
            })
            //this.applyinfo.people[0].deadline = new Date()
        },

        computed:{
            isEdit(){
                return this.$store.state.tabs.isEdit
            }
        },

        methods:{
            get_all_sys(){
                var that = this;
                var url = that.CONFIG.progress_url + "/system-map/names";
                ajax.get({
                    url:url,
                    that:that,
                    success:function(data){
                        console.log('get_all_sys:',data)
                        that.sysList = data

                    }
                })
            },
            checksys(sys){
                console.log('checksys',sys)
                this.applyinfo.people[0].severs[0].rxPath = sys.label
            },

            formatDate(value) {
                var date = new Date(value*1000);
                var year = date.getFullYear();
                var month = this.padDate(date.getMonth() + 1);
                var day = this.padDate(date.getDate());
                return year + '-' + month + '-' + day;
            },
            padDate(value) {
                return value <10 ? '0' + value:value;
            },

            validate(){
                var isSubmit = false
                this.$refs["accountInfo"].validate((valid) => {
                    if (valid) {
                        isSubmit = true
                    } else {
                        this.$refs.base.scrollTop = document.getElementById("accountInfo").offsetTop - 100
                        this.$Message.error('请填写必填项');
                    }
                })
                return isSubmit
            },
        },

        props:{
            ifedit: {},
            Papply: {},
            
        },
        // computed:{
        //     isEdit(){
        //         return this.$store.state.tabs.isEdit
        //     }
        // },
        // watch:{
        //     isEdit(Val){
        //         if((Val + '') === (this.reqId + '')){
        //             this.ifedit = false
        //         }else{
        //             this.ifedit = true
        //         }
        //     }
        // }


    }
</script>
